<template>
    <div class="product-list">
        <div @click="ChanGegoods(item.id)" class="product-item" v-for="(item,index) in products" :key="index">
            <img :src="item.main_img_url">
            <div class="products-item-bottom">
                <span>{{item.name}}</span>
                <p>￥{{item.price}}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'product-list',
    props:[
        'products'
    ],
    methods:{
        ChanGegoods(id){
            this.$router.push({
                path:'/goods',
                name:'goods',
                query:{
                    id
                }
            });
        }
    }
}
</script>

<style lang="scss">
@import './../assets/scss/mixin.scss';
@import './../assets/scss/config.scss';
    .product-list{
        margin:0px 8px 8px 8px;
       @include flex();
       .product-item{
           min-height: 20px;
           width: 49%;
           border-right: 2px;
           background-color:$colorJ;
           border-radius: 5px;
           text-align: center;
           margin-bottom: 4px;
           img{
               width:80%;
           }
           .products-item-bottom{
               text-align: center;
               margin-bottom: 5px;
               span{
                   font-size: 17px;
               }
               p{
                   font-size: 14px;
               }
           }
       }
    }
</style>